<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
<html>
<head>
	<title></title>
	<tag:header/>
	<!-- 编辑框-->
	<script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "${pageContext.request.contextPath}/ueditor/";</script>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script>
	<!-- 编辑框-->
	<style type="text/css">
		.options{
			padding: 2px 10px 2px 10px;
		}
	</style>
</head>
<body id="main_layout">
<div class="winContainer">
	<form id="formMain" action="" method="post" enctype="multipart/form-data">
		<%--<div class="btnBar">--%>
			<%--<a id="btnSave" href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconcls="icon-save" onclick="getValue()">保存</a>--%>
			<%--<input id="f_reset" name="f_reset" type="reset" style="display:none;" />--%>
			<%--<a id="btnReset" href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconcls="icon-undo" onclick="btnReset()" >重置</a>--%>
		<%--</div>--%>
		<div class="headerTable">
				<!--题目-->
				<div class="col" style="width:98%;" >
					<label class="th needStarAfter">题目：</label>
					<div class="td">
						<input id="surveyinfoId" type="hidden" class="widget" style=""/>
						<input id="questionTitle" type="text" class="widget" data-options="" style="width: 550px; "/>
					</div>
				</div>
				<!--是否必答-->
				<div class="col" style="width:98%;" >
					<label class="th needStarAfter">是否必答：</label>
					<div class="td">
						<select id="requiredStatus" class="easyui-combobox widget" data-options="required:true,editable:false" maxlength="500" style="width:100px;">
							<option value="1">必答</option>
							<option value="0">非必答</option>
						</select>
					</div>
				</div>
				<!--题干-->
				<div class="col" style="width:98%;height:1px;">&nbsp;</div>
				<div class="col" style="width:900px;">
					<label class="th ">题干：</label>
					<div class="td">
						<script id="editor" type="text/plain">
						</script>
					</div>
					<input name="questionContent" type="hidden" id="questionContent"/>
				</div>
				<div class="col" style="width:98%;height:1px;">&nbsp;</div>
				<!--问题类型-->
				<div class="col" style="width:98%;" >
					<label class="th needStarAfter">问题类型：</label>
					<div class="td">
						&nbsp;
						<input type="radio" name="questionType" value="0" checked="checked" />单选
						&nbsp;
						<input type="radio" name="questionType" value="1" />多选
						&nbsp;
						<input type="radio" name="questionType" value="2"  />简答
					</div>
				</div>
				<!--题目选项-->
				<div class="col" style="width:98%;" id="question_options" >
					<label class="th needStarAfter">题目选项：</label>
					<div class="td"  style="width: 500px;" >
						<a id="add_option" href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconcls="icon-add" onclick="add_option()">添加</a>
						<div class="options" id="optionsA" ><span style="padding:5px 5px 5px 5px;">A.</span><input type="text" name="optionsA" style="width:400px;"/><a  href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconcls="icon-delete" onclick="del_option(this)">删除</a></div>
						<div class="options" id="optionsB" ><span style="padding:5px 5px 5px 5px;">B.</span><input type="text" name="optionsB" style="width:400px;"/><a  href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconcls="icon-delete" onclick="del_option(this)">删除</a></div>
						<div class="options" id="optionsC" style="display: none;" ><span style="padding:5px 5px 5px 5px;">C.</span><input type="text" name="optionsC" style="width:400px;"/><a  href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconcls="icon-delete" onclick="del_option(this)">删除</a></div>
						<div class="options" id="optionsD" style="display: none;" ><span style="padding:5px 5px 5px 5px;">D.</span><input type="text" name="optionsD" style="width:400px;"/><a  href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconcls="icon-delete" onclick="del_option(this)">删除</a></div>
						<div class="options" id="optionsE" style="display: none;" ><span style="padding:5px 5px 5px 5px;">E.</span><input type="text" name="optionsE" style="width:400px;"/><a  href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconcls="icon-delete" onclick="del_option(this)">删除</a></div>
						<div class="options" id="optionsF" style="display: none;" ><span style="padding:5px 5px 5px 5px;">F.</span><input type="text" name="optionsF" style="width:400px;"/><a  href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconcls="icon-delete" onclick="del_option(this)">删除</a></div>
						<div class="options" id="optionsG" style="display: none;" ><span style="padding:5px 5px 5px 5px;">G.</span><input type="text" name="optionsG" style="width:400px;"/><a  href="javascript:void(0);" class="easyui-linkbutton" plain="true" iconcls="icon-delete" onclick="del_option(this)">删除</a></div>
					</div>
				</div>

		</div>
	</form>
</div>
</body>
</html>
<script type="text/template" id="headerTmpl">
	<%--<div>--%>
		<%--<div class="col" style="width:98%;" >--%>
			<%--<div class="td">--%>
				<%--<input id="title" type="text" class="widget" style="width: 550px; "/>--%>
			<%--</div>--%>
		<%--</div>--%>
		<%--<div class="col" style="width:98%;height:1px;">&nbsp;</div>--%>
		<%--<div class="col" style="width:900px;">--%>
			<%--<label class="th needStarAfter">题干：</label>--%>
			<%--<div class="td">--%>
				<%--<script id="editor" type="text/plain"/>--%>
			<%--</div>--%>
			<%--<input name="studyContent" type="hidden" id="studyContent"/>--%>
		<%--</div>--%>
	<%--</div>--%>
</script>
<script type="text/javascript">
    var ue;
	$(function () {

        /** 表单数据加载成功的事件处理函数 **/
        function onFormLoadSuccess(data) {

        }

        var formData = {};

        //构造pageform（主数据）
        var easyUIFormParams = {onLoadSuccess: onFormLoadSuccess};
        var url = null;
        var pageForm = new PageForm('formMain', url, easyUIFormParams, null, function (data) {

            ue = UE.getEditor('editor', {
                toolbars: [['fontsize', 'fontfamily', 'bold', 'italic', 'underline',
                    'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify',
                    'simpleupload']],
                initialFrameHeight:"300",
                wordCount:true,
                maximumWords:20000
            });

            //判断ueditor 编辑器是否创建成功
            ue.addListener("ready", function () {
                // editor准备好之后才可以使用
                ue.setContent($('#questionContent').val());
                //不可编辑
                ue.setDisabled('fullscreen');
            });

            // hack
            $('#requiredStatus').combobox('setValue','1');

            // 问题类型
            $(':radio[name="questionType"]').on('click',function(){
                // 2简答 隐藏选项
                if('2' == $(this).val()){
					$('#question_options').hide();
                    $('.options :text').val('')// 清空选项;
				}else{// 0单选 1多选
                    $('#question_options').show();
                    $('#optionsA').show();
                    $('#optionsB').show();
                    // 只显示最后一个删除按钮
                    options_show();
				}
			});


            // 待修改行
            var _row = parent.$('body').data('operation_data');
             // 赋值表单
        	 $('#questionTitle').val(_row.QUESTIONTITLE);
             $('#questionContent').val(_row.QUESTIONCONTENT);
             $('#requiredStatus').combobox('setValue',_row.REQUIREDSTATUS);
             // 问题类型赋值
             $(':radio[name="questionType"]').eq(_row.QUESTIONTYPE).prop('checked',true);
             // 根据问题类型 初始化 表单
             var _questionType = $(':radio[name="questionType"]:checked').val();
            // 2简答 隐藏选项
            if('2' == _questionType){
                $('#question_options').hide();
                $('.options :text').val('')// 清空选项;
            }else{// 0单选 1多选
                $('#question_options').show();
                $('#optionsA').show();
                $('#optionsB').show();
                $('#optionsC').show();
                $('#optionsD').show();
                // 只显示最后一个删除按钮
                options_show();
            }

             $('.options :text[name="optionsA"]').val(_row.OPTIONSA);
             $('.options :text[name="optionsB"]').val(_row.OPTIONSB);
             $('.options :text[name="optionsC"]').val(_row.OPTIONSC);
             $('.options :text[name="optionsD"]').val(_row.OPTIONSD);
             $('.options :text[name="optionsE"]').val(_row.OPTIONSE);
             $('.options :text[name="optionsF"]').val(_row.OPTIONSF);
             $('.options :text[name="optionsG"]').val(_row.OPTIONSG);

            if('' != _row.OPTIONSA){
                $('.options :text[name="optionsA"]').parents('.options').show();
            }else{
                $('.options :text[name="optionsA"]').parents('.options').hide();
            }
            if('' != _row.OPTIONSB){
                $('.options :text[name="optionsB"]').parents('.options').show();
            }else{
                $('.options :text[name="optionsB"]').parents('.options').hide();
            }
            if('' != _row.OPTIONSC){
                $('.options :text[name="optionsC"]').parents('.options').show();
            }else{
                $('.options :text[name="optionsC"]').parents('.options').hide();
            }
            if('' != _row.OPTIONSD){
                $('.options :text[name="optionsD"]').parents('.options').show();
            }else{
                $('.options :text[name="optionsD"]').parents('.options').hide();
            }
            if('' != _row.OPTIONSE){
                $('.options :text[name="optionsE"]').parents('.options').show();
            }else{
                $('.options :text[name="optionsE"]').parents('.options').hide();
            }
            if('' != _row.OPTIONSF){
                $('.options :text[name="optionsF"]').parents('.options').show();
            }else{
                $('.options :text[name="optionsF"]').parents('.options').hide();
            }
            if('' != _row.OPTIONSG){
                $('.options :text[name="optionsG"]').parents('.options').show();
            }else{
                $('.options :text[name="optionsG"]').parents('.options').hide();
            }


            // 只显示最后一个删除按钮
            options_show();

			// 查看页面 禁用所有 表单控件
            $('input').attr('disabled',true);

        }, null, 'edit');

        //初始化表单
        function initForm() {
            pageForm.init().loadForm(formData);
            $('#btnSave').on('click', function () {

                // 进行框架验证
                var $form = $('#formMain');
                if (!$form.form('validate')) {
                    return false;
                }

                // 校验通过
                var noPass = false;

                // 问题类型 0 单选 1多选 2 简答
                var _questionType = $(':radio[name="questionType"]:checked').val();
                var _questionTypeName = "";
                // 单选 多选 要验证 显示的选项 有没有 填写 选项值
				if('0' == _questionType || '1' == _questionType){
                    var d_len = $('.options :text:visible').length;
                    if(0 == d_len){
                        $.messager.alert('警告', "请添加至少2个选项", "warning");
                        return false;
					}
                    $('.options :text:visible').each(function(i,o){
                        if('' == $(o).val()){
                            noPass = true;
                            return false;
						}
                    });
                    if('0' == _questionType){
                        _questionTypeName = '单选';
					}else if('1' == _questionType){
                        _questionTypeName = '多选';
					}
				}else{
                    _questionTypeName='简答';
				}

				// 校验不通过
				if(noPass){
                    $.messager.alert('警告', "请填写选项", "warning");
                     return false;
				}

                var _rows = parent.$('#question_grid').datagrid('getSelections');
                // 待修改行
                var _row = _rows[0];
                // 待修改行index
                var _index =  parent.$('#question_grid').datagrid('getRowIndex',_row);

				// 问题json
                var _sortNum = _index + 1;
				var ebmsSurveyQuestions = {
                    "SURVEYINFOID": $('#surveyinfoId').val(),
                    "QUESTIONTITLE": $('#questionTitle').val(),
                    "QUESTIONCONTENT": $('#questionContent').val(),
                    "REQUIREDSTATUS":  $('#requiredStatus').combobox('getValue'),
                    "QUESTIONTYPENAME":_questionTypeName,
                    "QUESTIONTYPE":  _questionType,
                    "OPTIONSA":  $('.options :text[name="optionsA"]').val(),
                    "OPTIONSB":  $('.options :text[name="optionsB"]').val(),
                    "OPTIONSC":  $('.options :text[name="optionsC"]').val(),
                    "OPTIONSD":  $('.options :text[name="optionsD"]').val(),
                    "OPTIONSE":  $('.options :text[name="optionsE"]').val(),
                    "OPTIONSF":  $('.options :text[name="optionsF"]').val(),
                    "OPTIONSG":  $('.options :text[name="optionsG"]').val(),
                    "SORTNUM": _sortNum,
                    "REMARK": "",
                    "ADDBY": "",
                    "ADDTIME": "",
                    "EDITBY": "",
                    "EDITTIME": "",
                    "ID": _sortNum + ''
                };



                // exec 修改行
                parent.$('#question_grid').datagrid('updateRow',{
                    index: _index,
                    row: ebmsSurveyQuestions
                });
                // exec 刷新行
                parent.$('#question_grid').datagrid('refreshRow', _index);

                // 关闭弹出的window
                parent.$('#msgwindow').window('close');

                // // 判断编辑器内容是否为空
                // if(!UE.getEditor('editor').hasContents()){
                //     $.messager.alert('警告', "请填写题干", "warning");
                //     return false;
                // }
                // // 编辑器控制字数限制
                // var count = UE.getEditor('editor').getContentLength(true);
                // if(count > 20000){
                //     $.messager.alert('警告', "题干：你输入的字符个数已经超出最大允许值20000", "warning");
                //     return false;
                // }

            });
        }

        PageForm.prepareFormWidget($('.headerTable'), $($('#headerTmpl').html()), '${pageContext.request.contextPath}', '${modulePath}', 'add', initForm);
    });

    //取得编辑器中的内容赋值到隐藏域中，用于form提交
    function getValue(){
        $("#questionContent").val(UE.getEditor('editor').getContent());
    }

    // 重置
    function btnReset(){
        // 重置普通表单
        $('#formMain').form('reset');
        // 重置ue
        ue.setContent('');
	}

    // 选项 只显示最后一个删除按钮(一个都不显示)
    function options_show(){
        // var last_visible_len = $('.options .easyui-linkbutton:visible').length;
        // // 只显示最后一个 删除按钮
        // $('.options .easyui-linkbutton:visible').each(function(i,o){
        //     if(i < (last_visible_len-1)){
        //         $(o).hide();
        //     }
        // });
		$('#add_option').hide();
		// 一个都不显示
        $('.options .easyui-linkbutton').hide();
    }

    // 添加选项
    function add_option(){
        var dis_len = $('.options:visible').length;
        if(dis_len < 7){
            $('.options').eq(dis_len).show()
            // 只显示最后一个删除按钮
            options_show();
        }else{
            $.messager.alert('警告', "选项最多为7个", "warning");
            return false;
        }

    }

    // 删除选项 并  清空内容
    function del_option(obj){
        var dis_len = $('.options:visible').length;
        if(2 == dis_len){
            $.messager.alert('警告', "选项最少为2个", "warning");
            return false;
        }
        $(obj).parents('.options').children(':text').val('');
        $(obj).parents('.options').hide();
        // 显示上一个 删除
        $(obj).parents('.options').prev().children('.easyui-linkbutton').show();
        // 只显示最后一个删除按钮
        options_show();
    }


</script>
